<template>
    <div class="application">
        <transition 
        mode="out-in"
        enter-active-class="animate__animated  animate__slideInLeft "
        leave-active-class="animate__animated animate__slideOutRight leave-debouce"
        name="app">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>


export default {
   
}
</script>

<style lang="scss">
@import "./icon/icon.scss";


html,body{
  height: 100%;
}
.application{
    height: 100%;
}
.leave-debouce{       //防抖
    position: absolute !important;
    left: 0; right: 0; top: 0; bottom: 0;
}

.hidden{
    position: absolute;
    clip: rect(0,0,0,0);
}

.popMenu{
    position: absolute;
    left: 0px;
    top: 0px;
    display: none;
    background-color: beige;
    z-index: 20;
    .popMenu-item{
        white-space: nowrap;
        line-height: 1.3em;
    }
    .popMenu-item:hover{
        background-color: darkgoldenrod;
    }
}
</style>